<route lang="json5">
  {
    style: {
      navigationBarTitleText: '宝豆减扣',
    },
  }
  </route>
<template>
  <view class="page">
    <view class="content-card">
      <view class="container">


        <!-- 宝豆减扣 -->
        <view class="form-card">
          <view class="form-item ">
            <text class="label">扣减人ID</text>
            <view class="flex items-center justify-between">
              <uni-easyinput v-model="otherForm.receive_id" placeholder="请输入扣减人ID" :styles="{
                borderColor: '#EEEEEE',
                borderRadius: '8px',
              }" />
              <button class="check-btn w-2" @click="handleCheckReceiveId">校验</button>
            </view>
          </view>
          <view class="form-item" v-if="otherForm.receive_nickname">
            <text class="label">昵称：{{ otherForm.receive_nickname }}</text>
          </view>


          <view class="form-item">
            <text class="label">数量</text>
            <uni-easyinput v-model="otherForm.money" type="digit" placeholder="请输入数量" :styles="{
              borderColor: '#EEEEEE',
              borderRadius: '8px',
            }" />
          </view>

          <button class="submit-btn" @click="submitForm">确认</button>
        </view>
      </view>
    </view>


    <!-- 结果弹窗 -->
    <uni-popup ref="messagePopup" type="message">
      <uni-popup-message :type="popupConfig.type" :message="popupConfig.message" :duration="2000" />
    </uni-popup>
  </view>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue'
import { postReduceCargoValueAPI, getUserDataAPI } from '@/service/index/index'

// 当前选中的分段
const current = ref(0)



// 转给其他人的表单数据
const otherForm = reactive({
  receive_id: '',
  receive_nickname: '',
  receive_tel: '',
  money: 0,
})

// 弹窗实例
const messagePopup = ref()
const popupConfig = reactive({
  type: 'success',
  message: '',
})

const handleCheckReceiveId = () => {
  if (!otherForm.receive_id) {
    showMessage('error', '请输入扣减人ID')
    return
  }
  getUserDataAPI({
    receive_id: otherForm.receive_id
  }).then((res) => {
    console.log(res)
    if (res.code === 1) {
      otherForm.receive_nickname = res.data.username
      otherForm.receive_tel = res.data.tel
    } else {
      showMessage('error', res.msg)
    }
  })
}


// 分段切换
const onSegmentChange = (e: { currentIndex: number }) => {
  current.value = e.currentIndex
}

// 显示结果弹窗
const showMessage = (type: 'success' | 'error', message: string) => {
  popupConfig.type = type
  popupConfig.message = message
  messagePopup.value.open()
}



const submitForm = () => {
  if (!otherForm.receive_id) {
    showMessage('error', '请输入扣减人ID')
    return
  }
  if (!otherForm.receive_nickname) {
    showMessage('error', '请输入扣减人昵称')
    return
  }

  if (otherForm.money <= 0) {
    showMessage('error', '请输入正确的数量')
    return
  }
  postReduceCargoValueAPI({
    receive_id: otherForm.receive_id,
    receive_nickname: otherForm.receive_nickname,
    receive_tel: otherForm.receive_tel,
    money: otherForm.money
  }).then((res) => {
    console.log(res)
    if (res.code === 1) {
      showMessage('success', '操作成功')
    } else {
      showMessage('error', res.msg)
    }
  })
  otherForm.receive_id = ''
  otherForm.receive_nickname = ''
  otherForm.receive_tel = ''
  otherForm.money = 0
}
</script>

<style>
page {
  height: 100%;
}

.page {
  height: 100%;
  background-color: #f8f8f8;
}

.container {
  padding: 20rpx 0;
}

.segment {
  padding: 20rpx;
  margin-bottom: 30rpx;
  background-color: #ffffff;
  border-radius: 16rpx;
}

.segment :deep(.segmented-control__item) {
  height: 70rpx;
  padding: 0 30rpx;
  line-height: 70rpx;
}

.segment :deep(.segmented-control__text) {
  font-size: 14px;
}

.form-card {
  padding: 40rpx;
  background-color: #ffffff;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 20rpx rgba(0, 0, 0, 0.03);
}

.form-item {
  margin-bottom: 40rpx;
}

.label {
  display: block;
  margin-bottom: 20rpx;
  font-size: 14px;
  font-weight: 500;
  color: #333333;
}

.fee-info {
  display: flex;
  align-items: center;
  padding: 20rpx;
  margin-bottom: 40rpx;
  background-color: #fff7f7;
  border-radius: 8rpx;
}

.content-card {

  padding: 0 20rpx;
}

.fee-label {
  font-size: 14px;
  color: #333333;
}

.fee-value {
  font-size: 14px;
  font-weight: 500;
  color: #1890ff;
}

.submit-btn {
  width: 100%;
  height: 88rpx;
  font-size: 16px;
  font-weight: 500;
  line-height: 88rpx;
  color: #ffffff;
  background: linear-gradient(to right, #1890ff, #ff6b6b);
  border: none;
  border-radius: 44rpx;
}

.check-btn {
  width: 140rpx;
  height: 60rpx;
  font-size: 28rpx;
  font-weight: 500;
  line-height: 60rpx;
  color: #1890ff;
  background: #FAD0C4;
  border: none;
  border-radius: 28rpx;
  outline: none;
  margin-left: 10rpx;
}

.submit-btn:active {
  opacity: 0.9;
}

/* uni-easyinput样式重置 */
:deep(.uni-easyinput__content) {
  min-height: 88rpx;
  background-color: #f8f8f8;
}

:deep(.uni-easyinput__content-input) {
  font-size: 14px;
  color: #333333;
}

:deep(.is-input-border) {
  border: none !important;
}

:deep(.uni-easyinput__placeholder-class) {
  font-size: 14px;
  color: #999999;
}
</style>
